<template>
    <div>
        <el-button @click="state.waterfallList.pop()">删除末尾</el-button>
        {{ state.waterfallList }}
        <waterfall :col="8" style="height: 600px;">
            <div v-for="item in state.waterfallList" :key="item" class="waterfall-block" :style="`height: ${item}px;`">{{ item }}</div>
        </waterfall>
    </div>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'
import { useStore } from '@/store'
import waterfall from '@/components/waterfall/index.vue'

const store = useStore()
// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const state = reactive({
    waterfallList: [100, 200, 140, 287, 124, 432, 225, 246, 146, 64, 144, 126, 543],
})

// defineExpose({

// })
</script>
<style lang="scss" scoped>
.waterfall-block {
    display: inline-block;
    padding: 10px;
    background-color: rgb(121 121 121);
}
</style>
